/*
 * @Date: 2022-05-19 12:26:40
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-05-19 16:07:27
 * @FilePath: \my-react-components\src\component\Button\index.tsx
 * @Description: 按钮组件
 */
import classNames from "classnames";
import React, { memo } from "react";
export type ButtonSize = "large" | "small";
export type ButtonType = "primary" | "default" | "danger" | "link" | "warning";
interface BaseButtonProps {
  className?: string;
  /**设置 Button 的禁用 */
  disabled?: boolean;
  /**设置 Button 的尺寸 */
  size?: ButtonSize;
  /**设置 Button 的类型 */
  btnType?: ButtonType;
  children: React.ReactNode;
  href?: string;
}

type NativeButtonProps = BaseButtonProps &
  React.ButtonHTMLAttributes<HTMLElement>;
type NativeAnchorProps = BaseButtonProps &
  React.AnchorHTMLAttributes<HTMLElement>;
//Partial 让内容全部变成可选
export type ButtonProps = Partial<NativeButtonProps & NativeAnchorProps>;
const Button: React.FC<ButtonProps> = memo((props) => {
  const { className, disabled, size, btnType, children, href, ...restProps } =
    props;
  const classes = classNames("btn", className, {
    [`btn-${btnType}`]: btnType,
    [`btn-${size}`]: size,
    ["disabled"]: btnType === "link" && disabled,
  });
  if (btnType === "link") {
    if (href) {
      return (
        <a href={href} className={classes} {...restProps}>
          {children}
        </a>
      );
    } else {
      console.error("link形式需要一个连接");
    }
  }
  return (
    <button className={classes} disabled={disabled} {...restProps}>
      {children}
    </button>
  );
});
Button.defaultProps = {
  disabled: false,
  btnType: "default",
};
export default Button;
